<template>
    <div>
        <div v-if="$route.query.a != 'not'" class="wrapper">
            <h1>Search not found</h1>
            <p>Oops! The search string you entered was: {{ this.$route.query.a }}</p>
            <p>Sorry! This is an invalid search string.</p>
            <p>If you think this is a problem with us, please tell us.</p>
            <router-link to="/"><button>Back Home </button></router-link>
        </div>

        <div v-else class="wrapper">
            <h1>Network Congestion</h1>
            <!-- <p>Oops! The search string you entered was: {{this.$route.query.a}}</p> -->
            <p>Please refresh the page later</p>
            <p>Sorry! This is an invalid Network Resources.</p>
            <p>If you think this is a problem with us, please tell us.</p>
            <router-link to="/"><button>Back Home </button></router-link>
        </div>
    </div>
</template>

<script>

</script>

<style lang='less' scoped>
.wrapper {
    background-image: url('../../assets/img/error-404.svg');
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
    min-height: 605px;
    padding: 0 5%;

    h1 {
        color: var(--primary-color);
        padding: 100px 0 30px;
    }

    p {
        margin: 20px 0;
        color: #6c757e;
    }

    button {
        margin: 40px 0;
        background: var(--primary-color);
        color: #fff;
        padding: 10px 25px;
        border-radius: 4px;
        font-size: 0.85rem;
        cursor: pointer
    }

    a {
        color: #fff;
    }
}

@media (max-width:1000px) {
    .wrapper {
        min-height: 350px;

        h1 {
            padding: 50px 0 0;
        }
    }
}
</style>